import { ModalProps } from 'antd';
import { Button, Card, Radio, Collapse } from 'antd';
import { MoreOutlined } from '@ant-design/icons';
import { ThoughtChain } from '@ant-design/x';
import '../styles/chat.css';
import React, { useEffect, useRef, useState } from 'react';

type Props = {
  thoughtList: [];
} & ModalProps;

const Thought = ({ thoughtList }: Props) => {
  const [collapselabel, setCollapselabel] = useState('');

  // useEffect(() => {
  //   if (thoughtList.length > 0) {
  //     setCollapselabel(thoughtList[thoughtList.length - 1].title);
  //   }
  // }, [thoughtList]);

  const items = [
    {
      key: '1',
      label: collapselabel,
      children: (
        <div
          style={{
            width: '100%',
            // height: allthought ? '230px' : '28px',
            height: '230px',
            overflowY: 'auto',
            scrollbarWidth: 'none',
          }}
        >
          <ThoughtChain
            className="thoughtgap thoughtitembt beforelinebt"
            items={thoughtList}
            size={'middle'}
          />
        </div>
      ),
    },
  ];
  return (
    // <Collapse defaultActiveKey={['1']} ghost items={items} expandIconPosition={'end'} />
    <ThoughtChain
      className="thoughtgap thoughtitembt beforelinebt"
      items={thoughtList}
      size={'middle'}
    />
  );
};

export default Thought;
